<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="../lib/echarts.min.js"></script>
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 800px;height:600px;"></div>


    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        $.ajax({
            "url":"http://localhost:8080/goods/echartsPie",
            "data":{},
            "success":function (result){

                // option = {
                //     tooltip: {
                //         trigger: 'item'
                //     },
                //     legend: {
                //         top: '5%',
                //         left: 'center'
                //     },
                //     series: [
                //         {
                //         name: 'Access From',
                //         type: 'pie',
                //         radius: ['40%', '70%'],
                //         avoidLabelOverlap: false,
                //         itemStyle: {
                //             borderRadius: 10,
                //             borderColor: '#fff',
                //             borderWidth: 2
                //         },
                //         label: {
                //             show: false,
                //             position: 'center'
                //         },
                //         emphasis: {
                //             label: {
                //             show: true,
                //             fontSize: '40',
                //             fontWeight: 'bold'
                //             }
                //         },
                //         labelLine: {
                //             show: false
                //         },
                //         data: result.data.goodsPie
                //         }
                //     ]
                // };
                option = {
                    title: {
                        text: '商品分类比例',
                        subtext: '实时数据',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '商品占比',
                            type: 'pie',
                            radius: '50%',
                            data: result.data.goodsPie,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };


                myChart.setOption(option);
            },
            "dataType":"json"
        });



    </script>
</body>

</html>